<template>
  <div class="second_level_page">
    <baidu-map
      class="map"
      :center="{lng: 116.404, lat: 39.915}"
      :zoom="11"  @ready="mapReady"
      :scroll-wheel-zoom="true">
      <bm-driving start="郑州东站" end="上海虹桥机场" :panel="false"
                  :waypoints="stationlist"
                  :autoViewport="true">
      </bm-driving>
      <bm-marker :position="dian">
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>

import {getMap} from 'src/service/myOrder'
export default {

  beforeRouteLeave(to, from, next) {
    console.log(1);
    if (from.name !== null) {
      // 执行你想要执行的方法
      var ws =  this.webSocket;
      console.log(ws);
      ws.close();
    }
    next();
  },
  data () {
    return {
      // 途径站点
      stationlist:[],
      active: false,
      webSocket: {},
      speed:0,
      dian: {
          lng: 0,
          lat: 0
      },
      map:'',
      BMap:'',
      play: true,
      markerPoint:{lng:115.64877,lat:34.355577},
      path: [{lng:85.64877,lat:64.355577}],
      icon: {
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: {width: 52, height: 26},
        opts: {anchor: {width: 27, height:13}}
      }
    }
  },
  created() {
    this.getMap();
  },

  methods: {
    reset () {
      this.play = true
    },

    getMap() {
      getMap();
      let that=this;
      var ws = new WebSocket('ws://127.0.0.1:8071/getMap');
      ws.onmessage = function (data) {
        var s = data.data;
        const [longitude, latitude] = s.split(",").map(parseFloat);
        that.dian={
          lng:longitude,
          lat:latitude
        }
        console.log();
      }
      this.webSocket = ws;
    },

    //地图默认方法
    mapReady({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      // 点击地图添加监听事件获取经纬度
      map.addEventListener("click", (e) => {
        console.log(e.point.lng, e.point.lat);
      });
    },
  }
}
</script>

<style>
.map {
  margin: auto;
  width: 100%;
  height: 844px;
}
</style>
